<template>
    <div id="ph-toast" :class="cns" :visible="visible">{{msg}}</div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
    setup(props,{expose}) {
        const visible = ref(false)
        const cns = computed(()=>{
            return {
                'ph-toast':true,
                'ph-toast-show':visible.value
            }
        })
        const msg = ref('')
        const show = (v:string,timer=3000)=>{
            visible.value = true
            msg.value = v
            setTimeout(()=>{
                visible.value = false
            },timer)
        }
        return {show,visible,msg,cns}
    },
})
</script>
<style lang="scss" scoped>
.ph-toast{
    position: fixed;
    top:0;
    left:50%;
    margin: auto;
    background-color: rgba(0,0,0,.8);
    font-size: var(--phx);
    padding: var(--ph-10)  var(--ph-20);
    color: var(--ph-c-light);
    display: inline-block;
    backface-visibility: hidden;
    transition: transform .3s ease;
    transform: translate(-50%,-100%);
    z-index: 10100;
    border-radius: 5px;
    font-size: var(--ph-fs-small);
    &-show{
        transform: translate(-50%,300%);
    }
}
</style>
